<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    svg {
      background-color: #eee;
    }

    path {
      stroke: red;
      stroke-width: 5;
      /* stroke-linecap: round; */
      /* stroke-dasharray: 2;只有一个数字的时候 代表实线和空白部分的一样 */
      /*stroke-dasharray: 10,5;/*两个数字的时候 第一个数字代表实线、第二个数字代表空白部分的一样*/
      stroke-dasharray: 8, 5, 3, 2;
      fill: none
    }
  </style>
</head>

<body>
  <!-- 大写的 都是绝对坐标是相对svg的左上角    ；  小写都是相对路径 -->
  <!-- viewBox="x,y,width,height"  视口    x,y代表视口的起始坐标 width,height视口的宽高-->
  <svg width="400" height='400' viewBox="10,10,40,10" xmlns="http://www.w3.org/2000/svg">
    <!-- <path d="M10,10 L20,20 L20,200Z"></path>
    <path d='m30,20 l10,20'></path> -->

    <!-- Cx1,y1 x2,y2 x,y  x1,y1第一个控制点 x2,y2第二个控制点  x,y终点坐标-->
    <!-- <path d="M50,50 L50,100 C40,110  45,145 80,120"></path> -->
    <path d="M10,10 L20,20 Z"></path>
  </svg>

  <!-- g ： group  分组的意思  给g添加的属性 子元素可以继承-->
  <!-- use 复用svg中的某个节点 -->
  <svg width="400" height='400'>
    <g id='boy'>
      <rect width='50' height='50'></rect>
      <circle cx=50 cy=50 r=20></circle>
    </g>
    <use xlink:href="#boy" x=100 y=0 fill='red'></use>
    <use xlink:href="#boy" x=100 y=100 fill='blue'></use>
    <use xlink:href="#boy" x=200 y=0 fill='yellow'></use>
    <use xlink:href="#boy" x=200 y=100 fill='green'></use>
  </svg>

  <!-- defs  内容不会显示 一般用来做模板的壳子 -->
  <svg width="400" height='400'>
    <defs>
      <g id='boy'>
        <rect width='50' height='50'></rect>
        <circle cx=50 cy=50 r=20></circle>
      </g>
      <g id='girl'>
        <rect x=50 y=50 width='50' height='50'></rect>
        <circle cx=0 cy=0 r=25></circle>
      </g>
    </defs>
    <use xlink:href="#boy" x=100 y=0 fill='red'></use>
    <use xlink:href="#boy" x=100 y=100 fill='blue'></use>
    <use xlink:href="#boy" x=200 y=0 fill='yellow'></use>
    <use xlink:href="#boy" x=200 y=100 fill='green'></use>
    <use xlink:href="#girl" x=200 y=200 fill='green'></use>
  </svg>

  <!-- symbol 不会展示到视图上，只能通过use展示；可以使用viewBox属性 -->
  <svg width="400" height='400'>
    <symbol id='boy2'>
      <rect width='50' height='50'></rect>
      <circle cx=50 cy=50 r=20></circle>
    </symbol>

    <use xlink:href="#boy2" x=100 y=0 fill='red'></use>
  </svg>
</body>

</html>